<!-- 修改个人资料页 -->
<template>
  <div class="set-data">
    <div class="title">
      <h3>个人信息</h3>
    </div>
    <div class="content">
      <div class="via">
        <div class="size">
          <span>头像</span>
        </div>
        <div class="upload">
          <img src="../assets/dotted.svg" />
          <input
            type="file"
            id="file"
            name="file"
            multiple
            accept=".png,.jpg,.jpeg"
            @change="upload"
          />
          <span class="plus-sign"> + </span>
        </div>
        <div class="img-box">
          <img src="../assets/dotted.svg" class="img-bg" />
          <img :src="imgSrc" class="user-img" v-if="imgSrc" />
          <img
            :src="
              store.state.userInfo.userPic
                ? store.state.userInfo.userPic
                : '../assets/user-img.svg'
            "
            class="user-img-bg"
            v-else
          />
        </div>
      </div>
      <div class="ipt-item">
        <div class="size">
          <span>账号</span>
        </div>
        <el-input
          v-model="acc"
          :placeholder="
            store.state.userInfo.userAcc
              ? store.state.userInfo.userAcc
              : '请输入账号'
          "
        />
      </div>
      <div class="ipt-item">
        <div class="size">
          <span>用户名</span>
        </div>
        <el-input
          v-model="nm"
          :placeholder="
            store.state.userInfo.username
              ? store.state.userInfo.username
              : '请输入用户名'
          "
        />
      </div>
      <div class="btn-box">
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from "axios";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";

const router = useRouter();
let store = useStore();

let imgSrc = ref(""); // 图片路径
let imgInfo = reactive([]); // 图片路径
let acc = ref(""); // 账号
let nm = ref(""); // 用户名
// 上传按钮点击事件
let upload = (e) => {
  let arr = e.target.files[0];
  var reader = new FileReader();
  reader.readAsDataURL(arr);
  reader.onload = () => {
    imgSrc.value = reader.result;
    imgInfo = e.target.files[0];
  };
};

// 取消按钮
let cancel = () => {
  router.push({ path: "/home" });
};

// 提交按钮
let submit = () => {
  console.log(nm.value, acc.value);
  let fromData = new FormData();
  fromData.append("file", imgInfo);
  axios
    .post("http://192.168.27.59/goods/upload", fromData, {
      headers: {
        "Content-Type": "multipart/from-data",
      },
    })
    .then(({ data }) => {
      axios
        .post("http://192.168.27.59/worker/alterData", {
          id: store.state.userInfo.id,
          nm: nm.value ? nm.value : store.state.userInfo.username,
          acc: acc.value ? acc.value : store.state.userInfo.userAcc,
          pic: data.src ? data.src : store.state.userInfo.userPic,
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code == 200) {
            ElMessage({
              message: data.message,
              type: "success",
            });
            document.cookie = `username=${data.userInfo.username};`;
            document.cookie = `userAcc=${data.userInfo.userAcc};`;
            document.cookie = `userPic=${data.userInfo.userPic}; `;
            location.reload(true);
          } else {
            ElMessage.error("修改资料失败");
          }
        });
    });
};
</script>

<style lang="scss" scoped>
.set-data {
  width: 60vw;
  margin: 0 auto;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  background-color: #fff;
  // 标题
  .title {
    width: 100%;
    padding: 10px 0 10px 20px;
    border-bottom: 1px solid rgba($color: #666, $alpha: 0.2);
    box-sizing: border-box;
    h3 {
      font-size: 14px;
      line-height: 20px;
      padding-left: 10px;
      border-left: 3px solid #409eff;
      border-radius: 1px;
    }
  }
  .content {
    padding: 5vmin;
    color: #666;
    // 头像
    .via {
      display: flex;
      .size {
        font-size: 13px;
        width: 5vw;
        span {
          line-height: 24px;
        }
      }
      .img-box {
        margin: 0 5px;
        width: 3.75rem;
        height: 3.75rem;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        .img-bg {
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
        .user-img {
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
        .user-img-bg {
          width: 2rem;
        }
      }
      .upload {
        width: 3.75rem;
        height: 3.75rem;
        position: relative;
        text-align: center;

        img {
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
        input {
          width: 3.75rem;
          height: 3.75rem;
          opacity: 0;
          position: absolute;
          top: 0;
          left: 0;
        }
        .plus-sign {
          font-size: 24px;
          line-height: 3.75rem;
          color: #999;
        }
      }
    }
    // 输入框
    .ipt-item {
      font-size: 13px;
      display: flex;
      align-items: center;
      margin: 2vmin 0;
      .size {
        font-size: 13px;
        width: 5vw;
      }
      .el-input {
        width: 16vw;
      }
    }
    // 按钮
    .btn-box {
      display: flex;
      justify-content: flex-end;
      padding: 1.625rem;
      button {
        width: 6rem;
      }
    }
  }
}
</style>
